<template>
    <div class="biological-device-list container-bottom-20">
        <CardBox title="设备列表"></CardBox>
        <div class="content-container content-container-height-262">
            <div class="device-list-layout">
                <div class="device-list-layout-item" v-for="(item,index) in deviceList.slice(0,5)" :key="index" @click="select(item)">
<!--                    <div class="badge">{{item.alarmCount}}</div>-->
                    <div class="device-icon">
                        <img :src="require(`@/assets/img/biological-device-bg${index+1}.png`)" alt="设备图标">
                    </div>
                    <span class="device-name">{{item.localName}}</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import CardBox from '@/components/Global/CardBox.vue'
import {EventBus} from "../../utils/event-bus";
export default {
    name: 'BiologicalDeviceList',
    components: {
        CardBox
    },
    data() {
        return {
            type:"kongqi",
            deviceList:null,
            selectId:0
        }
    },
    methods:{
        select(item){
            EventBus.$emit('sent-device-id-to-right', item)
        }
    },
    mounted() {

        // this.$api.environment.getDeviceList(this.type).then(res => {
        //     this.deviceList = res;
        //     EventBus.$emit('set-biological-device-id', this.deviceList[0].id)
        // });
    },
    created() {
        EventBus.$on('set-biological-device-type', (message) => {
            this.type = message;
            this.$api.environment.getDeviceList(this.type).then(res => {
                this.deviceList = res;
                EventBus.$emit('sent-device-id-to-right', this.deviceList[0])
            });
        })
    }
}
</script>
<style lang="scss" scoped>
.biological-device-list{
}

.device-list-layout {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    width: 100%;

    &-item {
        width: 33.33%;
        height: 110px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        &:nth-child(4), &:nth-child(5) {
            width: 50%;

            .badge {
                right: 82px;
            }
        }

        .badge {
            position: absolute;
            top: 19px;
            right: 46px;
            width: 18px;
            height: 18px;
            background-color: #ff0000;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: 12px;
            z-index: 1;
        }

        .device-icon {
            width: 110px;
            height: 110px;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }

        .device-name {
            position: absolute;
            bottom: 10px;
            color: #ffffff;
            font-size: 14px;
        }
    }
}
</style>

